<html>
	<head>
		<script src="libraries/pyramid-1.0.1.js" type="text/javascript"></script>
		<script src="libraries/dependencyLoader.js" type="text/javascript"></script>
		<style>
			.container-fluid .span3 .tab-content {
		 		margin-left: 0;
		 		padding: 19px;
		 		border-left: 1px solid #eee;
				border-right: 1px solid #eee;
				border-bottom: 1px solid #eee;
			}
			.container-fluid .span9 .tab-content {
		 		margin-left: 0;
		 		padding: 19px;
		 		border-left: 1px solid #eee;
				border-right: 1px solid #eee;
				border-bottom: 1px solid #eee;
			}
			.container-fluid .span3 .nav {
				padding-bottom: 0;
				margin-bottom: 0;
			}
			.container-fluid .span9 .nav {
				padding-bottom: 0;
				margin-bottom: 0;
			}
		</style>		
	</head>
	<body>
		<div class="container-fluid">
			<div class="span3">
				<ul class="nav nav-tabs" id="leftTab">
					<li class="active"><a href="#movies" data-toggle="tab">Movies</a></li>
					<li><a href="#actors" data-toggle="tab">Actors</a></li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active" id="movies">
						<div data-bind="template: {name: 'movie-tree-short-template', foreach: movies}">
						</div>
					</div>
					<div class="tab-pane" id="actors">...</div>
				</div>
			</div>
			<div class="span9">
				<ul class="nav nav-tabs" id="mainTab">
					<li class="active"><a href="#main" data-toggle="tab">Main</a></li>
					<li><a href="#add" data-toggle="tab">+</a></li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active" id="main" data-bind="with: selectedMovie">
						<div class="row">
							<div class="span4">
								<h4 data-bind="text: general.title"></h4>
								<h4 data-bind="text: general.originalTitle"></h4>
							</div>
							<div class="span4">
								<button>save</button>
							</div>
						</div>
						<div class="row">
							<div class="span4">
								My Rate:
								<label data-bind="text: general.myRate"></label>
							</div>
							<div class="span4">
								Gender
								<label data-bind="text: general.gender"></label>
								Year
								<label data-bind="text: general.year"></label>
							</div>
						</div>
						<div class="row">
							<div class="span8">
								<div data-bind="template: {name: 'actor-link-short-template', foreach: actors}"></div>
							</div>
						</div>
						<div class="row">
							<div class="span8">
								<span data-bind="text: description.summary"></span>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="add">
						Add a new movie here!
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/html" id="movie-tree-short-template">
	<a href="#" data-bind="text: general.title, click: $root.selectMovie"></a><br>
</script>
<script type="text/html" id="actor-link-short-template">
	<a href="#" data-bind="text: fullName()"></a> (<span data-bind="text: character"></span>)<br>
</script>
<script>
	Pyramid.load('main');
	$('#leftTab a').click(function (e) {
	  e.preventDefault();
	  $(this).tab('show');
	});
	$('#mainTab a').click(function (e) {
	  e.preventDefault();
	  $(this).tab('show');
	});
</script>
